<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：

    -->
    <div id="demo">
       
        <input type="text" v-model="name1"><br>
        <input type="text" v-model="name2"><br>
        <input type="text" v-model="name3"><br>
        
    </div>
    <script type="text/javascript">
        function jsButton(){
            console.log(2222)
        }
        Vue.config.productionTip = false //关闭生产提示
        new Vue({
            el:"#demo",
            data:{
                //初始化原始参数
                name1:"feng",
                name2:"wx",
                name3:""
            },
            methods: {
                
            },
            computed:{
                // name3:{
                //     get(){
                //         return this.name1+this.name2
                //     },
                //     set(value){
                //         this.name1 = value
                //         this.name2 = value
                //     }
                // }
            },
            watch:{
                immediate:true,
                name3:{
                    handler(n,o){
                        
                        this.name3 = this.name1+this.name2
                    }
                },
                name1(n,o){
                    console.log(n)
                    this.name3 = n+this.name2
                },
                name2(n){
                    this.name3 = this.name1+n
                }
            }
        })
        
    </script>
    
</body>
</html>